<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>原始页面</h1>
    <button class="btn">跳转page1</button>
    <button class="back">前进</button>
    <button class="page2">跳转到page2</button>
    <script>
        // 和历史记录相关的 是history
        // back forward go:正数和负数；
        // 1.历史的回退操作:一定要有历史记录 
        document.getElementsByClassName("btn")[0].onclick = function(){
            window.location.href = "./page1.html";
        }
       
        // 2.前进；必须要有未来的历史记录
        document.getElementsByClassName("back")[0].onclick = function(){
            window.history.forward();
        }
        // 3.go ：可以跳转到指定的历史记录  可以接受 正数 也可以接受负数  一个是前进一个是后退 
        document.getElementsByClassName("page2")[0].onclick = function(){
            window.history.go(2);
        }
        // 需求1 ：有4给页面 每个页面有前进后退按钮 ， 第一个页面可以历史记录可以直接前进到第四个页面  
        // 第四个页面历史记录可以回退到第一个页面
        // 需求2：通过search获取地址栏信息做三个页面之间的路由切换操作，如果没有找到该页面 显示404提示信息；

    </script>
</body>
</html>